<template>
  <div>
    <el-form label-width="150px" size="mini">
      <el-form-item :label="productType.name">
        <el-select v-model="send.productType">
          <el-option
            v-for="(item,index) in productType.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="businessScene.name">
        <el-select v-model="send.businessScene">
          <el-option
            v-for="(item,index) in businessScene.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="场景金融名称">
        <el-input v-model.trim="send.financialSceneName" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item :label="fundSideName.name">
        <el-select v-model="send.fundSideName">
          <el-option
            v-for="(item,index) in fundSideName.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="业务系统编号">
        <el-input v-model.trim="send.code" placeholder="请输入编号"></el-input>
      </el-form-item>

      <el-form-item :label="examineState.name">
        <el-select v-model="send.examineState">
          <el-option
            v-for="(item,index) in examineState.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="bpmAuditStatus.name">
        <el-select v-model="send.bpmAuditStatus">
          <el-option
            v-for="(item,index) in bpmAuditStatus.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="ebillAuditStatus.name">
        <el-select v-model="send.ebillAuditStatus">
          <el-option
            v-for="(item,index) in ebillAuditStatus.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="paymentStatus.name">
        <el-select v-model="send.paymentStatus">
          <el-option
            v-for="(item,index) in paymentStatus.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="待支付清单编号">
        <el-input v-model.trim="send.paymentCode" placeholder="请输入编号"></el-input>
      </el-form-item>

      <el-form-item :label="fundUseStatus.name">
        <el-select v-model="send.fundUseStatus">
          <el-option
            v-for="(item,index) in fundUseStatus.children"
            :key="index"
            :label="item.name"
            :value="item.subscript"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" size="mini" class="reset" @click="zeroing">重置</el-button>
      <el-button type="primary" size="mini" class="btns" @click="search">查询</el-button>
    </el-form>

    <!-- 表格头 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="(item, index) in surface"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        align="center"
        :label="item.label"
        :type="item.index ? 'index' : null"
      >
        <template slot-scope="scope">
          <span
            :class="item.style ? item.style : null"
            @click="item.flag && handleClick(scope.row)"
          >{{ scope.row[scope.column.property] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="send.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "fundUse",
  title: "资金使用汇总",
  data() {
    return {
      //筛选头
      productTypeObj: {},
      productType: {
        name: "金融产品",
        children: [{ name: "全部", subscript: undefined }]
      },
      businessSceneObj: {
        1: "新房",
        2: "二手房",
        3: "合伙人"
      },
      businessScene: {
        name: "业务场景",
        children: [
          { name: "全部", subscript: undefined },
          { name: "新房", subscript: 1 },
          { name: "二手房", subscript: 2 },
          { name: "合伙人", subscript: 3 }
        ]
      },
      fundSideName: {
        name: "资金方",
        children: [{ name: "全部", subscript: undefined }]
      },
      examineStateObj: {
        1: "待审核",
        2: "运营审核通过",
        3: "财务审核通过",
        4: "运营审核拒绝",
        5: "财务审核拒绝",
        6: "H3审核拒绝",
        8: "保理审核拒绝"
      },
      examineState: {
        name: "审核状态",
        children: [
          { name: "全部", subscript: undefined },
          { name: "待审核", subscript: 1 },
          { name: "运营审核通过", subscript: 2 },
          { name: "财务审核通过", subscript: 3 },
          { name: "运营审核拒绝", subscript: 4 },
          { name: "财务审核拒绝", subscript: 5 },
          { name: "H3审核拒绝", subscript: 6 },
          { name: "保理审核拒绝", subscript: 8 }
        ]
      },
      bpmAuditStatusObj: {
        1: "审核中",
        2: "审核完成",
        3: "审核失败"
      },
      bpmAuditStatus: {
        name: "H3审核状态",
        children: [
          { name: "全部", subscript: undefined },
          { name: "审核中", subscript: 1 },
          { name: "审核完成", subscript: 2 },
          { name: "审核失败", subscript: 3 }
        ]
      },
      ebillAuditStatusObj: {
        0: "审核中",
        1: "审核成功",
        2: "审核拒绝"
      },
      ebillAuditStatus: {
        name: "第三方审核状态",
        children: [
          { name: "全部", subscript: undefined },
          { name: "审核中", subscript: 0 },
          { name: "审核成功", subscript: 1 },
          { name: "审核拒绝", subscript: 2 }
        ]
      },
      paymentStatusObj: {
        1: "待支付",
        2: "支付中",
        3: "支付成功",
        4: "支付失败"
      },
      paymentStatus: {
        name: "支付状态",
        children: [
          { name: "全部", subscript: undefined },
          { name: "待支付", subscript: 1 },
          { name: "支付中", subscript: 2 },
          { name: "支付成功", subscript: 3 },
          { name: "支付失败", subscript: 4 }
        ]
      },
      fundUseStatusObj: {
        1: "已使用",
        2: "冻结中",
        3: "已释放"
      },
      fundUseStatus: {
        name: "资金使用状态",
        children: [
          { name: "全部", subscript: undefined },
          { name: "已使用", subscript: 1 },
          { name: "冻结中", subscript: 2 },
          { name: "已释放", subscript: 3 }
        ]
      },
      send: {
        productType: undefined,
        businessScene: undefined,
        fundSideName: undefined,
        examineState: undefined,
        bpmAuditStatus: undefined,
        ebillAuditStatus: undefined,
        paymentStatus: undefined,
        fundUseStatus: undefined,
        financialSceneName: undefined,
        code: undefined,
        paymentCode: undefined,
        pageNum: 1, //当前页数
        pageSize: 10 //当前页条数
      },
      // 表格头
      surface: [
        { flag: false, prop: "index", label: "序号", width: 80, style: false },
        {
          flag: true,
          prop: "code",
          label: "业务系统编号",
          width: 180,
          style: "systemNumber"
        },
        {
          flag: false,
          prop: "financialSceneName",
          label: "场景金融名称",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "businessScene",
          label: "业务场景",
          width: 100,
          style: false
        },
        {
          flag: false,
          prop: "productType",
          label: "金融产品",
          width: 100,
          style: false
        },
        {
          flag: false,
          prop: "fundSideName",
          label: "资金方",
          width: 140,
          style: false
        },
        {
          flag: false,
          prop: "financialAmount",
          label: "使用金额(元)",
          width: 130,
          style: false
        },
        {
          flag: false,
          prop: "applyRole",
          label: "使用角色",
          width: 100,
          style: false
        },
        {
          flag: false,
          prop: "availableCycle",
          label: "使用周期(天)",
          width: 130,
          style: false
        },
        {
          flag: false,
          prop: "interestRate",
          label: "执行利率(%)",
          width: 100,
          style: false
        },
        {
          flag: false,
          prop: "interestRateBearingMethod",
          label: "利率承担方式",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "commitmentDetails",
          label: "承担详情",
          width: 180,
          style: false
        },
        {
          flag: false,
          prop: "name",
          label: "付款结算方式",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "examineState",
          label: "审核状态",
          width: 140,
          style: false
        },
        {
          flag: false,
          prop: "bpmAuditStatus",
          label: "h3审批状态",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "ebillAuditStatus",
          label: "第三方审核状态",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "assetCode",
          label: "资产编号",
          width: 230,
          style: false
        },
        {
          flag: false,
          prop: "validDate",
          label: "资产生效日",
          width: 200,
          style: false
        },
        {
          flag: false,
          prop: "expireDate",
          label: "资产到期日",
          width: 200,
          style: false
        },
        {
          flag: false,
          prop: "paymentCode",
          label: "支付清单编号",
          width: 180,
          style: false
        },
        {
          flag: false,
          prop: "fundUseStatus",
          label: "资金使用状态",
          width: 120,
          style: false
        },
        {
          flag: false,
          prop: "paymentStatus",
          label: "支付状态",
          width: 100,
          style: false
        }
      ],
      //总数据
      tableData: [],
      total: 0 //总条数
    };
  },
  created() {
    this.getType();
    this.getName();
    this.getDate();
  },
  activated() {
    let sends = this.$route.params.value;
    if (sends) {
      console.log(sends);
      this.zeroing();
      for (let key in sends) {
        this.send[key] = sends[key];
      }
    }
  },
  methods: {
    //搜索
    search() {
      this.send.pageNum = 1;
      this.send.pageSize = 10;
      this.getDate();
    },
    //重置
    zeroing() {
      for (let key in this.send) {
        this.send[key] = undefined;
      }
      this.send.pageNum = 1;
      this.send.pageSize = 10;
      this.getDate();
    },
    // 更新当前页条数
    handleSizeChange(val) {
      this.send.pageSize = val;
      this.getDate();
    },
    // 更新当前页
    handleCurrentChange(val) {
      this.send.pageNum = val;
      this.getDate();
    },
    //  业务系统编号点击事件
    handleClick(row) {
      this.$router.push({
        path: "brokerCompany",
        query: {
          code: row.code
        }
      });
    },
    //获取资金方
    getName() {
      this.$axios
        .get("/financialCenter/financeProduct/fundSideList")
        .then(res => {
          res.forEach(item => {
            this.fundSideName.children.push({
              name: item.fundSideName,
              subscript: item.fundSideName
            });
          });
        });
    },
    //获取金融产品
    getType() {
      this.$axios
        .post("/financialCenter/financeProduct/list", {
          pageNum: 1,
          pageSize: 999
        })
        .then(res => {
          res.list.forEach(item => {
            if (item.productTypeName == null) {
              this.productType.children.push({
                name: item.id,
                subscript: item.productType
              });
              this.productTypeObj[item.productType] = item.id;
            } else {
              this.productType.children.push({
                name: item.productTypeName,
                subscript: item.productType
              });
              this.productTypeObj[item.productType] = item.productTypeName;
            }
          });
        });
    },
    //获取数据
    getDate() {
      console.log(this.send.productType);
      this.$axios
        .post("/financialCenter/elianMeng/fundUseSummary", this.send)
        .then(res => {
          if (res.list != null) {
            res.list.forEach((it, index) => {
              it.productType = this.productTypeObj[it.productType];
              it.businessScene = this.businessSceneObj[it.businessScene];
              it.examineState = this.examineStateObj[it.examineState];
              it.bpmAuditStatus = this.bpmAuditStatusObj[it.bpmAuditStatus];
              it.ebillAuditStatus = this.ebillAuditStatusObj[
                it.ebillAuditStatus
              ];
              it.paymentStatus = this.paymentStatusObj[it.paymentStatus];
              it.fundUseStatus = this.fundUseStatusObj[it.fundUseStatus];
              it.index = index + 1;
              it.name = "E-Bill付款";
              if (it.applyRole == 1) {
                it.applyRole = "好生活";
              }
              if (it.applyRole == 2) {
                it.applyRole = "经纪人";
              }
              if (it.applyRole == 3) {
                it.applyRole = "经纪公司";
              }
              if (it.applyRole == 4) {
                it.applyRole = "网络推客";
              }
              if (it.applyRole == 5) {
                it.applyRole = "开发商";
              }
              if (it.applyRole == 6) {
                it.applyRole = "合伙人";
              }
              if (it.interestRateBearingMethod == 1) {
                it.interestRateBearingMethod = "单独承担";
              } else if (it.interestRateBearingMethod == 2) {
                it.interestRateBearingMethod = "多方承担";
              }
            });
          }
          this.total = res.total;
          this.tableData = res.list;
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  position: relative;

  .reset {
    width: 100px;
    position: absolute;
    bottom: 18px;
    right: 125px;
  }

  .btns {
    width: 100px;
    position: absolute;
    bottom: 18px;
    right: 15px;
  }

  .el-form-item {
    width: 350px;
    display: inline-block;

    .el-select {
      width: 100%;
    }
  }
}

// 业务系统编号字体样式
.systemNumber {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}
</style>